<template>
  <div class="app-container">
    <el-dialog
      :visible="status === 2"
      :close-on-click-modal="false"
      :show-close="false"
      width="90%">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <h1 style="text-align:center;">完善资料才能上线商家</h1>
        <h3 style="text-align:center;">补充完善注册资料，开启属于你的商家店铺</h3>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="logout()">退出登录</el-button>
        <el-button type="primary" @click="openDialog">完善资料</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible="status === 3"
      :close-on-click-modal="false"
      :show-close="false"
      width="90%">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <h1 style="text-align:center;">申请审核中</h1>
        <h3 style="text-align:center;">工作人员会在1-3个工作日进行审核，请耐心等待</h3>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="logout()">退出登录</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible="status === 4"
      :close-on-click-modal="false"
      :show-close="false"
      width="90%">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <h1 style="text-align:center;">审核成功，恭喜您加入AI门店</h1>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="status = 0">返回首页</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible="status === 5"
      :close-on-click-modal="false"
      :show-close="false"
      width="90%">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <h1 style="text-align:center;">审核失败，请修改申请资料</h1>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="logout()">退出登录</el-button>
        <el-button type="primary" @click="openDialog">修改资料</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="visible" :close-on-click-modal="false" :show-close="false" title="完善资料" width="95%" class="el_dialog">
      <el-row :gutter="10" class="el_row">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="11" class="el_row_bg">
          <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="85px" class="el_form">
            <div class="title_form">商户门店信息</div>
            <el-form-item label="门店名称" prop="shopName">
              <el-input v-model="dataForm.shopName" type="text"/>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contact">
              <el-input v-model="dataForm.contact" type="text" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="联系人号码" prop="telephone">
              <el-input v-model="dataForm.telephone" type="text" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="门店区域">
              <el-cascader
                :options="options"
                v-model="selectedOptions"
                size="large"
                @change="handleChange" />
            </el-form-item>
            <el-form-item label="门店地址" prop="address">
              <el-input v-model="dataForm.address" type="text" auto-complete="off"/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="11" class="el_row_bg">
          <el-form ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="85px" class="el_form">
            <div class="title_form">法人信息</div>
            <el-form-item label="法人姓名" prop="corporation">
              <el-input v-model="dataForm.corporation" type="text"/>
            </el-form-item>
            <el-form-item label="身份证号码" prop="idCard">
              <el-input v-model="dataForm.idCard" type="text"/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="24" class="el_row_bg">
          <el-button class="form_button" type="primary" @click="update">提 交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">门店总客户</div>
            <count-to :start-val="0" :end-val="userTotal" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">门店总到访数</div>
            <count-to :start-val="0" :end-val="remarkTotal" :duration="3000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日到店总客户数</div>
            <count-to :start-val="0" :end-val="newCustomer + oldCustomer" :duration="3200" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日新增客户</div>
            <count-to :start-val="0" :end-val="newCustomer" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日老客户到店</div>
            <count-to :start-val="0" :end-val="oldCustomer" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shoppingCard">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日新增到访</div>
            <count-to :start-val="0" :end-val="newRemark" :duration="3600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="12">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieData2" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="chart-wrapper">
        <line-chart :chart-data="lineChartData" />
      </div>
    </el-row>
    <el-row>
      <div class="chart-wrapper" style="padding-bottom: 20px;">
        <el-table :data="recentRemarks" element-loading-text="正在查询中。。。" border fit highlight-current-row stripe>
          <el-table-column label="门店最后5条跟进记录" align="center">
            <el-table-column align="center" label="客户名称" prop="username" min-width="100"/>
            <el-table-column :formatter="formatDate" align="center" label="时间" prop="createTime" min-width="160"/>
            <el-table-column align="center" label="内容" prop="detail" min-width="280"/>
            <el-table-column align="center" label="店员" prop="creator" min-width="100"/>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>

<script>
import { queryShopInfo, update } from '@/api/shop'
import CountTo from 'vue-count-to'
import LineChart from './components/LineChart'
import { info } from '@/api/dashboard'
import { getShopId } from '@/utils/auth'
import PieChart from './components/PieChart'
import { mockdata } from './mockdata'
import store from '@/store'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

const lineChartData = {
  data: {
    dates: []
  }
}

const pieData = {
  data: {
    data: []
  }
}
export default {
  components: {
    CountTo,
    LineChart,
    PieChart
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      visible: false,
      status: 0,
      userTotal: 0,
      remarkTotal: 0,
      newCustomer: 0,
      oldCustomer: 0,
      newRemark: 0,
      lineChartData: lineChartData.data,
      recentRemarks: [],
      pieData: pieData,
      pieData2: pieData,
      query: {
        shopId: getShopId()
      },
      dataForm: {
      }
    }
  },
  created() {
    this.status = store.getters.status
    info(this.query).then(response => {
      this.userTotal = response.data.data.allUserCount
      this.remarkTotal = response.data.data.allRemarkCount
      this.lineChartData = response.data.data.chartData
      this.newCustomer = this.lineChartData.newCustomer[this.lineChartData.newCustomer.length - 1]
      this.oldCustomer = this.lineChartData.oldCustomer[this.lineChartData.oldCustomer.length - 1]
      this.newRemark = response.data.data.newRemarkCount
      this.recentRemarks = response.data.data.recentRemarks
      var remarkCount = response.data.data.chartData.remarkCount
      if (store.getters.username === 'test') {
        this.lineChartData = mockdata.chartData
        this.newCustomer = 55
        this.oldCustomer = 35
        this.newRemark = 95
        remarkCount = mockdata.chartData.remarkCount
      }
      this.pieData = {
        data: [
          { value: this.newCustomer, name: '新客户' },
          { value: this.oldCustomer, name: '老客户' }
        ],
        title: '新老用户占比'
      }
      var pieData2 = []
      var dates = response.data.data.chartData.dates
      for (var i = 0; i < remarkCount.length; i++) {
        pieData2.push({ value: remarkCount[i], name: dates[i] })
      }
      this.pieData2 = {
        data: pieData2,
        title: '每日新增到访占比'
      }
    })
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    formatDate(row, column, cellValue) {
      var t = new Date(row.updateTime)
      return t.getFullYear() + '-' + (t.getMonth() + 1) + '-' + t.getDate() + ' ' + t.getHours() + ':' +
       t.getMinutes() + ':' + t.getSeconds()
    },
    openDialog() {
      queryShopInfo(getShopId()).then(resp => {
        this.dataForm = resp.data.data
        const city = resp.data.data.city
        const province = resp.data.data.province
        const region = resp.data.data.region
        this.selectedOptions = [TextToCode[province].code, TextToCode[province][city].code, TextToCode[province][city][region].code]
      })
      this.visible = true
    },
    handleChange(value) {
      this.dataForm.province = CodeToText[value[0]]
      this.dataForm.city = CodeToText[value[1]]
      this.dataForm.region = CodeToText[value[2]]
    },
    update() {
      update(this.dataForm).then(resp => {
        this.visible = false
        this.status = 3
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  @media screen and (max-width: 480px) {
    padding: 1px 8px;
  }
  .el_dialog{
    .el_row{
      .el_row_bg{
        min-width: 260px;
        width: 100%;
        border-radius: 5px;
        .el_form{
          border-radius: 5px;
          margin-bottom: 15px;
          box-shadow: 0 0 20px #dedede;
          border: 1px solid #eeeeee;
          padding: 10px;
          .title_form{
            margin-bottom: 15px;
            background: #f4f4f5;
            text-align: center;
            font-size: 24px;
            padding: 10px;
            font-weight: bold;
            opacity: 0.5;
            background: #acf;
            border-radius: 5px;
            cursor: context-menu;
          }
        }
      }
      .form_button{
        float: right;
      }
    }
  }

  padding-top: 1px;
  background-color: #f8f8f8;
  // background: url('../../assets/custom-theme/images/background.png');
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 20px;
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col{
    margin-bottom: 15px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
         background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shoppingCard {
        background: #34bfa3
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shoppingCard {
      color: #34bfa3
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 20px;
  }
</style>
